<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>质量督导管理</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
	<meta content="yes" name="apple-mobile-web-app-capable"/>
	<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
	<meta content="telephone=no" name="format-detection"/>
	<script type="text/javascript" src="<?php echo base_url().'public/home/js/' ?>jquery.js"></script>
	<?php include_once "public/home/html/bootstrap.php";
	include_once "public/home/html/alert.php"; ?>
	<link rel="stylesheet" href="<?php echo base_url().'public/h_ui/lib/Hui-iconfont/1.0.8/' ?>iconfont.css">
	<link rel="stylesheet" href="<?php echo base_url().'public/home/css/' ?>mui.min.css">
	<script type="text/javascript" src="<?php echo base_url().'public/home/js/' ?>function.js"></script>
	<script type="text/javascript" src="<?php echo base_url().'public/home/js/' ?>question_list.js"></script>
	


</head>
<style>
	body{
		padding: 3%;
		background-color: #ffffff;
		overflow:visible
	}
	.float_left{
		float: left;
	}
	.clear{
		clear: both;
	}
	select{
		width: 60%!important;
	}
	
.bigImg{

    position: fixed;

    background-color: rgba(0,0,0, 0.5);

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    z-index: 100;
height: 100%;
vertical-align:middle;
}



.icon_close{

    position: absolute;

    top: 20px;

    right: 20px;

    width: 25px;

    height: 25px;

    color: #ccc;

    font-size: 34px;

    line-height: 20px;

    text-align: center;

    cursor: pointer;

    z-index: 102;

}

.icon_close::before{

    content: "x";

}

.img_content{

    position: relative;

    width: 999999px;
    height: 100%;
    vertical-align:middle;
width: 100%

}

.img_item{

    float: left;

    /*position: relative;*/

    /*background-image: url(../img/下载.gif);*/

    background-position: center center;

    background-repeat: no-repeat;

    width: 100%;
    display:flex; /*使用flex盒子*/
  justify-content:center;/*水平轴上居中*/
  align-items:center;/*垂直轴上居中*/

}

.img_item:after{

    clear: both;

    content: "";

    display: block;

}

.img_item img{
/*
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
*/
    position: absolute;
transform:translate(-50%,-50%);
    left: 50%;
    top:50%;
    width: 100%;
}


</style>
<body>
	

<input type="hidden" id='url' value="<?php echo base_url()?>">
<div class="search-head header mui-bar mui-bar-nav row" style="background-color: #f7f9fa; border:none;">
	<div class="col-xs-1" style="margin-top: 3%">
		<a class=" Hui-iconfont Hui-iconfont-slider-left" href="javascript:void(0)" onclick="history.back();" style="color: #C9C9C9"></a>
	</div>
	<div class="col-xs-11">
		<h1 class="mui-title" style="color:#333;margin-left: -5%">问卷管理</h1>
	</div>
	</div>
	
	<div class="list"  style="margin-top: 15%;padding:0 7% 0 7%" >
		<ul class="list-group assess_list">
			<?php if(isset($list)): ?>
			<?php foreach ($list as $k => $v):?>
				<li class='list-group-item'  id="<?php echo $v['id']?>" onclick="showImg(this)"><?php echo $v['title'] ?></li>
			<?php endforeach ?>

			<?php endif ?>
		</ul>
	</div>	
	<div class="bigImg" id="bigImg" style="display:none">
		<div class="icon_close"></div>
		<div class="img_content"></div>
	</div>

	
<script>
	$(function(){	
		$('#bigImg .icon_close').on('click', function(e) {
			e.preventDefault();
			$("#bigImg").hide();
		})
	
})	
	var showImg=function(t) {
		var id=$(t).attr('id');
		$('#bigImg').css('display', 'inline ');
		$.ajax({
			url: $('#url').val()+'Home/Question/showImg/'+id,
			type: 'POST',
			dataType: 'json',
			success:function(data){
				$('.img_content').html('<div class="img_item"><img src="../../' +  data.v + '"></li>');		


			}
		})
		
	}
</script>



	</body>
	</html>